<template>
    <div class="container">
      <div class="header-top">
        <div class="top-left">
          <img :src="seller.avatar" width="64" height="64">
        </div>
        <div class="top-middle">
          <div class="header-title">
            <span class="brand"></span>
            <span class="name">{{seller.name}}</span>
          </div>
          <div class="description">{{seller.description +' / ' +seller.deliveryTime + '分钟送达'}}</div>
          <div class="supports">
            <span class="icon"></span>
            <span class="supports-desc">{{seller.supports[0].description}}</span>
          </div>
        </div>
        <div class="top-right" @click="openDetail">
          <span class="num">{{seller.supports.length +'个'}}</span>
          <span class="iconfont rightDetail">&#xe604;</span>
        </div>
      </div>
      <div class="header-bottom" @click="openDetail">
          <span class="gTitle"></span>
          <span class="text">{{seller.bulletin}}</span>
          <span class="iconfont rightDetails">&#xe604;</span>
      </div>
      <div class="background">
        <img :src="seller.avatar" width="100%" height="100%"/>
      </div>
      <home-detail :seller="seller" ref="showDetail"></home-detail>
    </div>
</template>

<script>
import HomeDetail from './HomeDetail'
export default {
  name: 'HomeHeader',
  components: {
    HomeDetail
  },
  props: {
    seller: Object
  },
  data () {
    return {
    }
  },
  methods: {
    openDetail () {
      this.$refs.showDetail.toggleShow()
    }
  }
}
</script>

<style lang="stylus" scoped>
  .container
    position relative
    blur 10px
    height 134px
    background rgba(7,17,27,0.5)
    color #fff
    .header-top
      position relative
      display flex
      padding: 24px 12px 18px 24px
      .top-left
        width 64px
        height 64px
        border-radius 2px
        img
          border-radius 2px
      .top-middle
        margin-left 16px
        .header-title
          margin 2px 0 8px 0
          font-size 16px
          .brand
            display inline-block
            background url("../../../../resource/img/brand@2x.png") no-repeat
            width 30px
            height 18px
            background-size 30px 18px
            vertical-align top
          .name
            margin-left 6px
            font-size 16px
            font-weight bold
            line-height 18px
        .description
            font-size 12px
            font-weight 200
            line-height 12px
            margin-bottom 10px
        .supports
          .icon
            display inline-block
            background url("../../../../resource/img/decrease_1@2x.png") no-repeat
            width 12px
            height 12px
            background-size 12px 12px
            vertical-align bottom
          .supports-desc
            font-size 10px
            font-weight 200
            line-height 12px
      .top-right
        position absolute
        right 12px
        bottom 12px
        width 58px
        height 24px
        line-height 24px
        font-size 10px
        border-radius 16px
        background rgba(0,0,0,0.2)
        text-align center
        .rightDetail
          font-size 8px
    .header-bottom
      font-weight 200
      position relative
      height 28px
      line-height 28px
      background rgba(7,17,27,0.2)
      padding 0 22px 0 12px
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
      .gTitle
        display inline-block
        /*margin-top 8px*/
        width 22px
        height 12px
        background url("../../../../resource/img/bulletin@2x.png") no-repeat
        background-size 100%
        vertical-align middle
      .text
        font-size 10px
      .rightDetails
        position absolute
        top 2px
        right 12px
        font-size 10px
    .background
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      z-index -1
      filter blur(10px)
      overflow hidden
</style>
